<template>
	<view class="content" >
		<view style="background: #2979ff;height: 150rpx;"></view>
		<view class="contents box-shadow4 pr" style="height: 140rpx;top:-100rpx;">
			<view @click="showMobile" class="p30 f32 pr">
				<view v-if="user.id">
					<image :src="user.head_pic" class="pr" 
					style="border-radius: 50%;width: 60rpx;height: 60rpx;top:12rpx;right:5rpx;"></image>
					<text>{{user.nickname}}</text>
				</view>
				<input v-else type="text" value="" name="" class="mt20" disabled="{{true}}" placeholder="输入对方手机号"/>
				<view class="pa" style="right: 10rpx;top:50rpx;"><u-icon name="arrow-right"></u-icon></view>
			</view>
		</view>
		
		<view class="relationship f32 p30 pr" style="top:-100rpx;">
			<view class="b mt20 mb20">买卖关系</view>
			<view class="disfr-lr mt10">
				<view @click="setType" data-id="0" :class="'guabottom-left-bom '+(forms.role == 0 ? 'guanow' : '')">我是付款方</view>
				<view @click="setType" data-id="1" :class="'guabottom-left-bom '+(forms.role == 1 ? 'guanow' : '')">我是收款方</view>
			</view>
			<view class="b mt20 mb20">平台交易流程</view>
			<view class="p20" style="background: #f4f4f4;line-height: 180%;">
				<view>1、双方确认好合作细节及结算标准后，任何一方均可主动发起交易</view>
				<view>2、发起方选择自己是收款方还是付款方，填写交易金额后等待对方确认</view>
				<view>3、合作双方确认交易金额无误后，付款方将交易金额先打到哦信官方支付宝</view>
				<view>4、平台收到资金后会告知收款方，然后收款方可以履约合作职责</view>
				<view>5、收款方履约完后可以通过交易入口申请提现</view>
				<view>6、付款方确认收款方发起的提现后，平台就会交易金打给收款方</view>
				<view>其他补充说明:</view>
				<view>1、平台交易是哦信平台为合作双方提供的一个免费工具，不收取手续费</view>
				<view>2、如有任何问题均可点击本页面左下角咨询客服解决，客服早9点到晚12点都在线</view>
			</view>
			<view class="b mt20 mb20">交易金额</view>
			<view class="p20" style="background: #f4f4f4;line-height: 180%;">
				<input type="text" v-model="forms.amount" class="mt20" placeholder="￥输入交易金额"/>
			</view>
		</view>
		<view style="height: 60px;"></view>
		<view class="guabottom ">
			<view class="disf">
				<checkbox-group @change="setCheckbox">
				  <label  class="checkbox-type" style="position: relative;top:-18rpx;">
					  <checkbox value="1" class="csize"/>
				  </label>
				</checkbox-group>
				<view>
					同意哦信<text @click="goPage" data-uri="/pages/article/transaction" style="color:#2979ff">《平台交易协议》</text>
				</view>
			</view>
			<view class="disfr-lr">
			   <view @click="toServers" class="guabottom-left-bom">咨询客服</view>
			   <view @click="nextStep" class="guabottom-right-bom">发起交易</view>
			</view>
		</view>
		<!--<loading :loading="not_load"/><!--加载状态-->
		<u-no-network tips="哎呀，网络信号丢失"></u-no-network><!--检测网络-->
		<!--输入手机号-->
		<u-popup v-model="throwOutMask" mode="center" width="600rpx" height="400rpx" :closeable="true" border-radius="8">
			<view class="p30">
				<form @submit="submit">
				   <view class="b">输入对方手机号</view>
				   <view class="form-list mt60 pr">
				   	<input type="number" name="mobile" maxlength="250" placeholder="*输入手机号" placeholder-style="color: #8f8f8f;" />
				   </view>
				  
				   <view class="form-list mt60" style="text-align: center;">
				   	<button form-type="submit" class="custom-min-button" style="width: 300rpx;height: 70rpx;line-height: 70rpx;border-radius: 20px;">完成</button>
				   </view>
				</form>
			</view>
		</u-popup>
		
	</view>
</template>

<script setup>
import { onLoad, onShow, onHide} from '@dcloudio/uni-app';
import { ref } from 'vue';	
const show_main=ref(false);
const not_load=ref(false);
const numList=ref([
	{name:'向合作方发起交易'},
	{name:'付款方支付交易款'},
	{name:'合作完成后，结算交易款至乙方账户'},
	{name:'交易完成'},
]);
const oh_signal=ref([]);
const forms=ref({user_id:0,role:0,amount:"",is_agree:0});
//同意协议
const setCheckbox=(e)=>{
	let value=e.detail.value;
	forms.value.is_agree=value.length;
};
//页面加载时
onLoad(async (options)=>{
   loadPage({},false);
});

//页面显示时执行
onShow(()=>{
	//console.log('语法糖onShow');
	 //loadPage({},false);
});
//页面隐藏时执行
onHide(()=>{
	//console.log('语法糖onHide');
});
/**
 * 加载接口数据
 * @param {Object} options  参数,对像数组
 * @param {Object} isPage   是否加载大于1页
 */
const loadPage=async (options,isPage)=>{
	let ret = await uni.$get('/appapi-guarantee-stepone',options);
	if(ret.error_code != 0){
		show_main.value=true;
		not_load.value=true;
		uni.$utils.showToast(ret.info,0,()=>{
			uni.navigateBack({data:1});
		});
		return;
	}
	//console.log(ret.data);
	show_main.value=true;
	not_load.value=true;
	oh_signal.value=ret.data.oh_signal;
	
};
/**
 * 模板属性跳转页面
 * @param {Object} e
 */
function goPage(event){
	uni.$utils.dataSetPage(event);
};

// 发起客服
const toServers=()=>{
	var index = Math.floor(Math.random() * oh_signal.value.length);
	let val=oh_signal.value[index];
	if(!val) return;
	//console.log(val);return;
	let uri='';
	let conv=getConversationID(val);
	if(conv.conversationID){
		uri='/pages/chat-single/chat-single?conversationID='+conv.conversationID+'&nick='+conv.userProfile.nick+'&to='+val;
		uni.$utils.goPage(uri,0);
		return;
	}
	not_load.value=false;
	let str=uni.$appConfig['IM_PREFIX_MAKR']['da_zhao_hu']['rule']+'你好！';
	uni.TIM.createTextMessage(0,val,str,(data)=>{
		setTimeout(()=>{
			conv=getConversationID(val);
			not_load.value=true;
			if(conv.conversationID){
				uri='/pages/chat-single/chat-single?conversationID='+conv.conversationID+'&nick='+conv.userProfile.nick+'&to='+val;
				uni.$utils.goPage(uri,0);
				return;6
			}
		},500);
	});
};
//获取当前用户的会话ID
const getConversationID=(userId)=>{
	let list=uni.$vuex.state.globalData.conversationList;
	for(let i in list){
		if(list[i].type != 'C2C') continue;
		if(list[i].userProfile.userID == userId){
			return list[i];
		}
	}
	return {};
};

//显示输入手机
const throwOutMask=ref(false);
const user=ref({});
const showMobile=()=>{
	throwOutMask.value=true;
};
const submit=async(e)=>{
	let form=e.detail.value;
	if(!form.mobile){
		uni.$utils.showToast('请输入手机号');
		return;
	}
	not_load.value=false;
	let ret = await uni.$post('/appapi-config-searchuser',{},{keyword:form.mobile});
	not_load.value=true;
	let list=ret.data.list;
	if(!list[0]){
		uni.$utils.showToast('未找到'+form.mobile+'该手机号用户');
		return;
	}
	user.value=list[0];
	forms.value.user_id=list[0].id;
	throwOutMask.value=false;
};
//切换身份
const setType=(e)=>{
	let id=e.currentTarget.dataset.id;
	forms.value.role=id;
};
//一下步
const nextStep=async()=>{
	if(!forms.value.user_id || forms.value.user_id <= 0){
		uni.$utils.showToast('请输入对方手机号');
		return;
	}
	if(!forms.value.amount || forms.value.amount <= 0){
		uni.$utils.showToast('请输入交易金额');
		return;
	}
	if(forms.value.is_agree == 0){
		uni.$utils.showToast('请同意哦信《平台交易协议》');
		return;
	}
	not_load.value=false;
	let ret = await uni.$post('/appapi-guarantee-steptwo',{},forms.value);
	not_load.value=true;
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	uni.$utils.showToast(ret.info,0,()=>{
		uni.$utils.goPage('/pages/user/user',2);
	});
};
</script>

<style  lang="scss">
	page {
		background: #fff;
	}
	.contents{
		width:660rpx;
		height: 200px;
		margin: 30rpx auto;
		background: #fff;
		border-radius: 6px;
	}
	.guabottom{
		position: fixed;
		bottom:0;
		left:0;
		background: #fff;
		height: 240rpx;
		width: 100%;
		padding: 20rpx 40rpx;
	}
	.guabottom-left-bom,.guabottom-right-bom{
		width: 320rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		border: 2px #0088fe solid;
		color:#0088fe;
		text-align: center;
		border-radius: 4px;
	}
	.guabottom-right-bom{
		border:none;
		color:#fff;
		background: #0088fe;
	}
	.guanow{
		border:none;
		color:#fff;
		background: #0088fe;
	}
</style>
